<template>
  <div class="cBox">
    <div class="leftBox">
      <ul>
        <a-checkbox-group @change="onChange" v-model="selectKeys">
          <li
            v-for="(item, index) in itemObj"
            :key="index"
            class="checkItem"
            :class="[active == index ? 'activeClass' : '']"
          >
            <a-checkbox :value="item.key" :key="index"> </a-checkbox>
            <span class="itemBox" @click="itemClik(index)">
              <i v-if="item.key == 0"><img src="~@/assets/ico/u4990.png"/></i>
              <i v-if="item.key == 1"><img src="~@/assets/ico/u4995.png"/></i>
              <i v-if="item.key == 2"><img src="~@/assets/ico/u5000.png"/></i>
              <i v-if="item.key == 3"><img src="~@/assets/ico/u5005.png"/></i>
              {{ item.value }}
            </span>
          </li>
        </a-checkbox-group>
      </ul>
    </div>

    <div class="rightBox">
      <a-form-model ref="ruleForm1" :model="form1" v-show="showArr[0]">
        <a-form-model-item>
          时间段在
          <a-time-picker
            v-model="form1.startPeriod"
            class="time"
            style="margin-left: 0;"
            valueFormat="HH:mm"
            placeholder=""
            format="HH:mm"
          /> 点至
          <a-time-picker
            v-model="form1.endPeriod"
            class="time"
            style="margin-left: 0;"
            valueFormat="HH:mm"
            placeholder=""
            format="HH:mm"
          /> 点，且近 <a-input class="input" v-model.number="form1.day" style="margin-left: 0;" /> 天内与种子号码通联超过
          <a-input class="input" v-model.number="form1.time" style="margin-left: 0;" /> 次的人员
        </a-form-model-item>
        <a-form-model-item>
          时间段在
          <a-time-picker
            v-model="form1.networkStartPeriod"
            class="time"
            style="margin-left: 0;"
            valueFormat="HH:mm"
            placeholder=""
            format="HH:mm"
          /> 点至
          <a-time-picker
            v-model="form1.networkEndPeriod"
            class="time"
            style="margin-left: 0;"
            valueFormat="HH:mm"
            placeholder=""
            format="HH:mm"
          /> 点与种子号码通联，且手机网络制式为
          <a-select v-model="form1.network" placeholder="请选择" style="margin-left: 0;width:100px;">
            <a-select-option value="2G"> 2G </a-select-option>
            <a-select-option value="3G"> 3G </a-select-option>
            <a-select-option value="4G"> 4G </a-select-option>
            <a-select-option value="5G"> 5G </a-select-option>
          </a-select>
          的人员
        </a-form-model-item>
      </a-form-model>
      <a-form-model ref="ruleForm2" :model="form2" v-show="showArr[1]">
        <a-form-model-item>
          时间范围在距今
          <a-input class="input" v-model.number="form2.day" style="margin-left: 0;" /> 天内，种子号码在任意
          <a-input class="input" v-model.number="form2.min" />分钟内，通联
          <a-input class="input" v-model="form2.num" style="margin-left: 0;" /> 个以上的号码
        </a-form-model-item>
        <a-form-model-item>
          时间范围在距今
          <a-input class="input" v-model="form2.msgDay" style="margin-left: 0;" /> 天内，收到种子号码的群发短信
        </a-form-model-item>
      </a-form-model>
      <a-form-model ref="ruleForm3" :model="form3" v-show="showArr[2]">
        <a-form-model-item>
          时间段在
          <a-time-picker
            v-model="form3.startPeriod"
            class="time"
            style="margin-left: 0;"
            valueFormat="HH:mm"
            placeholder=""
            format="HH:mm"
          /> 点至
          <a-time-picker
            v-model="form3.endPeriod"
            class="time"
            style="margin-left: 0;"
            valueFormat="HH:mm"
            placeholder=""
            format="HH:mm"
          /> 点，且近
          <a-input class="input" v-model.number="form3.day" style="margin-left: 0;" /> 天内与种子号码通联大于
          <a-input class="input" v-model.number="form3.num" style="margin-left: 0;" /> 次的人员
        </a-form-model-item>
      </a-form-model>
      <a-form-model ref="ruleForm4" :model="form4" v-show="showArr[3]">
        <a-form-model-item>
          在
          <a-input class="input" v-model.number="form4.day" style="margin-left: 0;" /> 天内，每天转账次数大于
          <a-input class="input" v-model.number="form4.num" />次的人员
        </a-form-model-item>
        <a-form-model-item>
          在
          <a-input class="input" v-model.number="form4.transferDay" style="margin-left: 0;" /> 天内，转账金额在
          <a-select v-model="form4.transferLevel" placeholder="请选择" style="margin-left: 0;width:100px;">
            <a-select-option value="A"> A </a-select-option>
            <a-select-option value="B"> B </a-select-option>
            <a-select-option value="C"> C </a-select-option>
            <a-select-option value="D"> D </a-select-option>
          </a-select>
          等级以上的行为超过
          <a-input class="input" v-model.number="form4.transferNum" />次的人员
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
export default {
  props: ['modalShow', 'list'],
  data() {
    return {
      itemObj: [
        { key: 0, value: '作案手机模型' },
        { key: 1, value: '涉走私水客群体挖掘模型' },
        { key: 2, value: '异常通联行为发现' },
        { key: 3, value: '异常资金往来挖掘' }
      ],
      active: 0,
      form1: {
        startPeriod: '',
        endPeriod: '',
        day: '',
        time: '',
        networkStartPeriod: '',
        networkEndPeriod: '',
        network: ''
      },
      form2: {
        day: '',
        min: '',
        num: '',
        msgDay: ''
      },
      form3: {
        startPeriod: '',
        endPeriod: '',
        day: '',
        num: ''
      },
      form4: {
        day: '',
        num: '',
        transferDay: '',
        transferLevel: '',
        transferNum: ''
      },
      showArr: [],
      checkedArr: [],
      modelIdList: [],
      selectKeys: []
    }
  },
  created() {
    this.itemObj.forEach(() => {
      this.showArr.push(false)
    })
    this.showArr[0] = true
  },
  mounted() {
    // this.getModalList()
  },

  methods: {
    itemClik(index) {
      console.log(index)
      this.active = index
      this.showArr = []
      this.itemObj.forEach(() => {
        this.showArr.push(false)
      })
      this.showArr[index] = true
      // console.log(this.showArr)
    },
    close() {
      this.$emit('on-close')
    },
    selectModel(index, flag) {
      let modelList = this.modelList
      this.modelList = []
      modelList[index].selected = !flag
      this.modelList = modelList
    },
    onChange(checkedValues) {
      // console.log('checked = ', checkedValues)
      this.checkedArr = checkedValues
      // this.getData()
      this.onValidate()
    },
    onValidate() {
      let flag = true
      this.checkedArr.forEach(item => {
        if (item == 0) {
          // console.log(Object.values(this.form1))
          for (let key in this.form1) {
            if (this.form1[key] == '') {
              flag = false
              this.$message.warning('作案手机模型配置不能为空！')
              break
            }
          }
        }
        if (item == 1) {
          // console.log(Object.values(this.form2))
          for (let key in this.form2) {
            if (this.form2[key] == '') {
              flag = false
              this.$message.warning('涉走私水客群体挖掘模型配置不能为空！')
              break
            }
          }
        }
        if (item == 2) {
          // console.log(Object.values(this.form3))
          for (let key in this.form3) {
            if (this.form3[key] == '') {
              flag = false
              this.$message.warning('异常通联行为发现模型配置不能为空！')
              break
            }
          }
        }
        if (item == 3) {
          // console.log(Object.values(this.form4))
          for (let key in this.form4) {
            if (this.form4[key] == '') {
              flag = false
              this.$message.warning('异常资金往来挖掘模型配置不能为空！')
              break
            }
          }
        }
      })
      return flag
    },
    getModelIdList() {
      return this.modelIdList
    },
    getData() {
      if (this.checkedArr.length <= 0) {
        this.$message.warning('至少勾选一项模型')
        return
      }
      let flag = this.onValidate()
      if (!flag) {
        return
      }
      let obj = {}
      this.modelIdList = []
      this.checkedArr.forEach(item => {
        if (item == 0) {
          obj.phoneModelDTO = this.form1
          this.modelIdList[0] = '11'
        }
        if (item == 1) {
          obj.wadeModelDTO = this.form2
          this.modelIdList[1] = '12'
        }
        if (item == 2) {
          obj.exceptionRelationModelDTO = this.form3
          this.modelIdList[2] = '13'
        }
        if (item == 3) {
          obj.exceptionTradeModelDTO = this.form4
          this.modelIdList[3] = '14'
        }
      })
      // console.log(this.modelIdList)
      return obj
    },
    setData(obj) {
      // console.log('obj.phoneModelDTO')
      // console.log(obj.phoneModelDTO)
      // console.log(obj.wadeModelDTO)
      // console.log(obj.exceptionRelationModelDTO)
      // console.log(obj.exceptionTradeModelDTO)
      this.selectKeys = []
      if (obj.phoneModelDTO != null) {
        this.form1 = obj.phoneModelDTO
        this.selectKeys[0] = 0
        this.checkedArr[0] = 0
      }
      if (obj.wadeModelDTO != null) {
        this.form2 = obj.wadeModelDTO
        this.selectKeys[1] = 1
        this.checkedArr[1] = 1
      }
      if (obj.exceptionRelationModelDTO != null) {
        this.form3 = obj.exceptionRelationModelDTO
        this.selectKeys[2] = 2
        this.checkedArr[2] = 2
      }
      if (obj.exceptionTradeModelDTO != null) {
        this.form4 = obj.exceptionTradeModelDTO
        this.selectKeys[3] = 3
        this.checkedArr[3] = 3
      }
    }
  }
}
</script>
<style lang="less" scoped>
.cBox {
  padding-bottom: 50px;
  overflow: hidden;
  .leftBox {
    float: left;
    display: flex;
    align-items: center;
    border-right: 1px solid #ccc;
    padding-right: 20px;
    ul {
      float: left;
      list-style: none;
      margin: 0px;
      padding: 0;
      .checkItem {
        cursor: pointer;
        margin: 5px 5px;
        padding: 5px 5px;
        .itemBox {
          display: inline-block;
          width: 220px;
          i {
            border: 1px #ccc solid;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 33px;
            margin: 4px 6px 4px 10px;
          }
        }
      }
    }
  }
  .rightBox {
    float: left;
    margin-left: 20px;
  }
}
.activeClass {
  background-color: #eef7ff;
}
.input {
  width: 70px;
  margin: 0 6px;
}
.time {
  width: 100px;
}
/deep/.ant-col-15 {
  width: 65%;
}
</style>
